<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">修改密码</block></cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur text-bold':''" v-for="(item,index) in tap" :key="index" @tap="tabSelect" :data-id="index">
					{{tap[index]}}
				</view>
			</view>
			<view class="padding" v-show="TabCur == 0">
				<view class="cu-form-group margin-top">
					<view class="title" style="width: 180upx;">旧密码</view>
					<input placeholder="请输入旧密码" type="text" v-model="oldpassword"></input>
				</view>
				<view class="cu-form-group">
					<view class="title" style="width: 180upx;">新密码</view>
					<input placeholder="请输入新密码" type="text" v-model="newpassword"></input>
				</view>
				<view class="cu-form-group">
					<view class="title" style="width: 180upx;">重复密码</view>
					<input placeholder="请重复输入新密码" type="text" v-model="repetpassword"></input>
				</view>
				<view class="padding">
					<button class="cu-btn bg-blue lg" style="width: 80%;margin-left: 10%;" @click="postmes()">修改</button>
				</view>
			</view>
			<view class="padding" v-show="TabCur == 1">
				<view class="cu-form-group margin-top">
					<view class="title" style="width: 180upx;">手机号</view>
					<input placeholder="请输入手机号" type="text" v-model="mobile"></input>
				</view>
				<view class="cu-form-group">
					<view class="title" style="width: 180upx;">验证码</view>
					<input placeholder="请输入验证码" v-model="code"></input>
					<button class='cu-btn bg-blue shadow' @click="sendcode()">{{btmes}}</button>
				</view>
				<view class="cu-form-group">
					<view class="title" style="width: 180upx;">新密码</view>
					<input placeholder="请输入新密码" type="text" v-model="newpassword"></input>
				</view>
				<view class="padding">
					<button class="cu-btn bg-blue lg" style="width: 80%;margin-left: 10%;" @click="postcode()">修改</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
  export default {
    data() {
		return {
			Imgbase:getApp().globalData.Imgbase,
			TabCur: 0,
			tap:['密码验证','验证码验证'],
			mobile:'',
			oldpassword:'',
			newpassword:'',
			repetpassword:'',
			code:'',
			btmes:'发送验证码',
			locktime:0,
			lockstate:0,
			timer:null,
		}
    },
    methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
		},
		showLockTime(){
			let _this = this;
			this.timer = setInterval( () => {
			    _this.locktime -= 1;
				_this.btmes = _this.locktime+'s后可再发送'
				if(_this.locktime <= 0){
					_this.lockstate = 0;
					clearTimeout(_this.timer);
					_this.timer = null; 
					_this.btmes = '发送验证码';
				}
			}, 1000)
		},
		postcode(){
			let _this = this;
			if (this.mobile && /^1[3456789]\d{9}$/.test(this.mobile)) {
			}else {
				uni.showToast({
					icon: 'none',
					title: '请先输入正确的手机号！'
				});
				return;
			}
			if(this.code == ''){
				uni.showToast({
					icon: 'none',
					title: '请输入验证码!'
				});
				return;
			}
			if(this.newpassword == ''){
				uni.showToast({
					icon: 'none',
					title: '请输入新密码!'
				});
				return;
			}
			uni.request({
				url: _this.$globals.apibase+'/api/Applogin/changePasswordbyMobile',
				data: {
					token: uni.getStorageSync('token'),
					mobile: _this.mobile,
					code: _this.code,
					newpassword: _this.newpassword,
				},
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if(res.data.code == '1'){
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						});
					}
					if(res.data.code == '0'){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				}
			}); 
		},
		postmes(){
			let _this = this;
			if(this.oldpassword == ''){
				uni.showToast({
					icon: 'none',
					title: '请输入旧密码!'
				});
				return;
			}
			if(this.newpassword == ''){
				uni.showToast({
					icon: 'none',
					title: '请输入新密码!'
				});
				return;
			}
			if(this.repetpassword != this.newpassword){
				uni.showToast({
					icon: 'none',
					title: '新密码和重复密码不一致!'
				});
				return;
			}
			uni.request({
				url: _this.$globals.apibase+'/api/Applogin/changePasswordbyOld',
				data: {
					token: uni.getStorageSync('token'),
					oldpassword: _this.oldpassword,
					newpassword: _this.newpassword,
					repetpassword: _this.repetpassword,
				},
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if(res.data.code == '1'){
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						});
					}
					if(res.data.code == '0'){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				}
			}); 
		},
		sendcode(){
			let _this = this;
			if(this.lockstate == 1){
				return;
			}
			if (this.mobile && /^1[3456789]\d{9}$/.test(this.mobile)) {
			}else {
				uni.showToast({
					icon: 'none',
					title: '请先输入正确的手机号！'
				});
				return;
			}
			_this.lockstate = 1;
			_this.locktime = 60;
			uni.request({
				url: _this.$globals.apibase+'/api/Applogin/sendcode',
				data: {
					mobile: _this.mobile,
				},
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if(res.data.code == '1'){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
						_this.showLockTime();
					}
					if(res.data.code == '0'){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
						_this.lockstate = 0;
					}
				}
			}); 
		},
    },
    onLoad(options) {
    },
	onUnload() {
		if(this.timer) {  
			clearTimeout(this.timer);  
			this.timer = null;  
		}  
	},
  }
</script>

<style>
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
</style>
